<template>
	<view class="content" v-if="article">
		<h1>{{ article.title }}</h1>
		<rich-text :nodes="article.content"></rich-text>
		<view
			style="display: flex;justify-content: flex-end;gap:12px;padding: 24px 0;margin-bottom: 12px;border-bottom: 1px solid #c8c7cc;">
			<view style="display: flex;align-items: center;">
				<uni-icons type="eye" size="24" style="line-height: 1;margin-right: 4px;"></uni-icons>
				{{ article.views_count }}
			</view>
			<view style="display: flex;align-items: center;"
				:style="{color:userStore.like_articles.includes(state.id)?'#2d8cf0':'inherit'}"
				@click="handleLikeArticle">
				<uni-icons type="hand-up" size="24" style="line-height: 1;margin-right: 4px;"
					:color="userStore.like_articles.includes(state.id)?'#2d8cf0':undefined"></uni-icons>
				{{ article.likes_count }}
			</view>
		</view>
		<view>
			<hb-comment ref="hbCommentRef" :cmData="commentData" @add="handleAddComment"
				@like="handleLikeComment"></hb-comment>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from "vue"
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		SERVER_URL
	} from "@/config/index.js"
	import {
		useUserStore
	} from "@/stores/user.js"
	import dayjs from "dayjs"

	const userStore = useUserStore()

	const hbCommentRef = ref()

	const state = reactive({
		id: null
	})

	const article = ref(null)

	const loadDetail = () => {
		if (!state.id) return
		uni.showLoading({
			title: "加载中……"
		})
		uni.request({
			url: SERVER_URL + '/article/detail/' + state.id,
			method: "GET",
			success: (res) => {
				if (res.statusCode === 200) {
					console.log(res.data);
					article.value = res.data
					uni.setNavigationBarTitle({
						title: article.value.title
					})
				}
			},
			complete: () => {
				uni.hideLoading()
			}
		});
	}

	const getTree = (data) => {
		let result = [];
		let map = {};
		data.forEach(item => {
			map[item.id] = item;
		});
		data.forEach(item => {
			let parent = map[item.parentId];
			if (parent) {
				(parent.children || (parent.children = [])).push(item);
			} else {
				result.push(item);
			}
		});
		return result;
	}

	const commentData = ref({
		readNumer: 0,
		comment: [],
		commentSize: 0
	})

	const loadComment = () => {
		if (!state.id) return
		uni.request({
			url: SERVER_URL + `/article/${state.id}/comment`,
			method: "GET",
			success: (res) => {
				console.log(res.data);
				const comments = res.data.map((item) => {
					return {
						id: item.id,
						owner: false,
						hasLike: userStore.like_article_comments.includes(item.id),
						likeNum: item.likes_count,
						avatarUrl: SERVER_URL + item.avatar,
						nickName: item.nickname,
						content: item.content,
						parentId: item.parent_id,
						createTime: dayjs(item.created_on).format("YYYY-MM-DD HH:mm:ss")
					}
				})

				commentData.value = {
					readNumer: 0,
					comment: getTree(comments),
					commentSize: comments.length
				}

				console.log(commentData.value)
			},
		});
	}

	const handleAddComment = (e) => {
		console.log(e)
		uni.request({
			url: SERVER_URL + '/article/comment',
			method: "POST",
			data: {
				parent_id: e.pId,
				article_id: state.id,
				content: e.content
			},
			header: {
				"content-type": "application/json",
				"authorization": userStore.token
			},
			success: (res) => {
				if (res.statusCode === 200) {
					hbCommentRef.value.addComplete()
					loadComment()
				}
			}
		});
	}

	const handleLikeComment = (e) => {
		console.log(e)
		uni.request({
			url: SERVER_URL + '/article/comment/like',
			method: "POST",
			data: {
				comment_id: e,
				is_like: !userStore.like_article_comments.includes(e)
			},
			header: {
				"content-type": "application/json",
				"authorization": userStore.token
			},
			complete: (res) => {
				userStore.loadArticleCommentLike().then(() => {
					loadComment()
				})
			}
		});
	}

	const handleLikeArticle = () => {
		if (!state.id) return
		const is_like = !userStore.like_articles.includes(state.id)
		uni.request({
			url: SERVER_URL + '/article/like',
			method: "POST",
			data: {
				article_id: state.id,
				is_like,
			},
			header: {
				"content-type": "application/json",
				"authorization": userStore.token
			},
			success: (res) => {
				if (res.statusCode === 200) {
					article.value.likes_count += (is_like ? 1 : -1)
				}
			},
			complete: (res) => {
				userStore.loadArticleLike()
			}
		});
	}

	onLoad(async (e) => {
		state.id = Number(e.id)
		// state.id = 1
		await userStore.loadArticleLike()
		await userStore.loadArticleCommentLike()
		loadDetail()
		loadComment()
	})
</script>

<style scoped lang="scss">
	.content {
		padding: 24px;
	}
</style>